<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div ref="wraps" class="wraps">
        <div class="item" v-for="(item,index) in newList" :key="index"
            :style="{ background: item.background, height: item.height+'px', left: item.left+'px', top: item.top+'px' }"></div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';

const props = defineProps({
    list: {
        type: Array,
    }
})
const newList = reactive<any[]>([])
const newHeight = reactive([])
const wraps = ref(null)

const init = () => {
    const width = 100
    const x = wraps.value.clientWidth
    const colum = Math.floor(x / width)
    for (let i = 0; i < props.list.length; i++) {
        if (i < colum) {
            props.list[i].left = i * width
            props.list[i].top = 20
            newList.push(props.list[i])
            newHeight.push(props.list[i].height)
        }else{
            let current = newHeight[0]
            let index = 0
            newHeight.forEach((h,i)=>{
                if(current > h){
                    current = h
                    index = i
                }
            })
            props.list[i].top = current + 20
            props.list[i].left = index * width
            newHeight[index] = newHeight[index] + props.list[i].height + 20
            newList.push(props.list[i])
        }

    }


}
onMounted(() => {
    init()
})

</script>
<style scoped>
.wraps {
    position: relative;
    height: 100%;
}

.item {
    position: absolute;
    width: 80px;
}
</style>
  